<template>
  <div v-loading="loading" class="app-main-content-box">
    <app-main-title title="券基础配置" />
    <el-form
      ref="form"
      v-loading="loading"
      :model="form"
      :rules="rules"
      label-suffix="："
      label-width="150px"
      size="small"
    >
      <el-form-item prop="payCreateMchid">
        <span slot="label">微信支付券<br>创券商户号</span>
        <el-input v-model.trim="form.payCreateMchid" maxlength="50" placeholder="eg. 165****224" />
      </el-form-item>
      <el-form-item>
        <div class="tips">* 必须填写才可以正常创建和发放微信支付券</div>
        <div class="tips">* 服务商模式请填写服务商的MCHID， 普通商户模式请填写微信商户号对的MCHID</div>
        <div class="tips">* 创建券同步渠道时如果提示证书问题, 请联系您的服务供应商添加微信商户号证书</div>
      </el-form-item>
      <el-form-item prop="paySendMpAppid">
        <span slot="label">微信支付券<br>发券公众号AppID</span>
        <el-input v-model.trim="form.paySendMpAppid" maxlength="50" placeholder="eg. wx_38dio****j9832" />
      </el-form-item>
      <el-form-item>
        <div class="tips">* 必须填写， 创券商户号对应的公众号AppID, 请勿填写小程序AppID</div>
      </el-form-item>
      <el-form-item prop="paySendMaAppid">
        <span slot="label">微信支付券<br>发券小程序AppID</span>
        <el-input
          v-model="form.paySendMaAppid"
          :autosize="{ minRows: 3 }"
          type="textarea"
          placeholder="eg. wx_38dio****j9832"
        />
      </el-form-item>
      <el-form-item>
        <div class="tips">* 选填, 用于标识创券商户号已经关联的小程序APPID</div>
        <div class="tips">* 支持填写多个, 一行一个，Enter换行</div>
        <div class="tips">* 用户已填写的小程序中领券将不需要额外的身份认证，缩短领券流程，但同时也需要将上述AppID添加到创券商户号的AppID关联中</div>
      </el-form-item>
      <el-form-item prop="busiCreateMchid">
        <span slot="label">微信商家券<br>创券商户号</span>
        <el-input v-model.trim="form.busiCreateMchid" maxlength="50" placeholder="eg. 165****224" />
      </el-form-item>
      <el-form-item>
        <div class="tips">* 必须填写才可以正常创建、发放和核销微信商家券</div>
        <div class="tips">* 服务商模式填写服务商的MCHID，普通商户模式填写微信商户对应的MCHID</div>
        <div class="tips">* 创建券同步渠道时如果提示证书问题, 请联系您的服务供应商添加微信商户号证书</div>
        <div class="tips">* 发券小程序需要关联APPID到此商户号，如果需要不关联实现领券请填写归属商户号</div>
      </el-form-item>
      <el-form-item prop="busiUseMpAppid">
        <span slot="label">微信商家券<br>核券公众号APPID</span>
        <el-input v-model.trim="form.busiUseMpAppid" maxlength="50" placeholder="eg. wx_38dio****j9832" />
      </el-form-item>
      <el-form-item>
        <div class="tips">* 必须填写才可以正常核销已经发放的微信商家券</div>
        <div class="tips">* 该APPID需要已经和创券商户号关联了关系</div>
      </el-form-item>
      <el-form-item prop="busiBelongMchid">
        <span slot="label">微信商家券<br>归属商户号</span>
        <el-input v-model.trim="form.busiBelongMchid" maxlength="50" placeholder="eg. 165****224" />
      </el-form-item>
      <el-form-item>
        <div class="tips">* 选填, 服务商模式请填写特约商户的商户号， 其他情况留空即可</div>
        <div class="tips">* 如果填写了归属商户号， 只需要发券小程序APPID关联了此商户号即可实现发券</div>
      </el-form-item>
      <el-form-item>
        <el-button type="primary" round @click="submitForm">保存</el-button>
      </el-form-item>
    </el-form>
  </div>
</template>

<script>
import { getMchIdBindInfo, saveMchIdBindInfo } from '@/views/cardsAndOffer/api/coupon'

export default {
  data() {
    return {
      // 配置
      // 校验字段相关
      rules: {
        payCreateMchid: { required: true, message: '请输入', trigger: ['blur', 'change'] },
        paySendMpAppid: { required: true, message: '请输入', trigger: ['blur', 'change'] },
        busiCreateMchid: { required: true, message: '请输入', trigger: ['blur', 'change'] },
        busiUseMpAppid: { required: true, message: '请输入', trigger: ['blur', 'change'] }
      },
      // 状态
      loading: false,
      // 数据
      form: {
        busiBelongMchid: null,
        busiCreateMchid: null,
        busiUseMpAppid: null,
        payCreateMchid: null,
        paySendMaAppid: null,
        paySendMpAppid: null
      }
    }
  },
  computed: {},
  watch: {},
  beforeCreate() {
  },
  created() {
  },
  beforeMount() {
  },
  mounted() {
    this.fetchData()
  },
  beforeUpdate() {
  },
  update() {
  },
  activated() {
  },
  deactivated() {
  },
  beforeDestroy() {
  },
  destroyed() {
  },
  methods: {
    /**
     * 数据组
     */
    fetchData() {
      this.loading = true
      getMchIdBindInfo().then(res => {
        const params = res.data || {
          busiBelongMchid: null,
          busiCreateMchid: null,
          busiUseMpAppid: null,
          payCreateMchid: null,
          paySendMaAppid: null,
          paySendMpAppid: null
        }
        params.paySendMaAppid = params.paySendMaAppid && params.paySendMaAppid.replace(/,/g, '\r\n') || null
        this.form = params
      }).finally(() => {
        this.loading = false
      })
    },
    /**
     * 按钮组
     */
    // 保存
    submitForm() {
      this.$refs.form.validate((valid) => {
        if (valid) {
          const params = Object.assign({}, this.form)
          params.paySendMaAppid = params.paySendMaAppid ? params.paySendMaAppid
            .trim()
            .replace(/\r\n|\n|\r/g, ',')
            .replace(/,+/g, ',') : ''
          this.loading = true
          saveMchIdBindInfo(params).then(res => {
            this.$notify({
              title: '成功',
              message: '保存',
              type: 'success',
              duration: 2000,
              offset: 40
            })
          }).finally(() => {
            this.loading = false
          })
        }
      })
    }
    /**
     * 状态组
     */
    /**
     * 方法组
     */
  }
}
</script>

<style rel="stylesheet/scss" lang="scss" scoped>
.el-input, .el-textarea {
  width: 500px;
}

::v-deep .el-form-item--small .el-form-item__label {
  line-height: 16px;
}

.tips {
  font-size: 12px;
  line-height: 1.6;
}
</style>
